<template>
  <div
    class="home-container select-none h-screen w-screen bg-center bg-no-repeat bg-cover flex flex-col p0"
  >
    <!-- 顶部 title 图片 Start -->
    <div class="h-90px flex items-center justify-center overflow-hidden">
      <img class="h-full block" src="@/assets/imgs/home/title-bar.png" alt="" />
    </div>
    <!-- 顶部 title 图片 End -->

    <!-- 顶部 操作栏 Start -->
    <div class="flex items-center justify-between box-border px-40px">
      <div class="flex items-center">
        <div class="flex items-center mr-20px cursor-pointer hover:brightness-120">
          <img class="block w48px" src="@/assets/imgs/home/user.png" alt="" srcset="" />
          <div class="font-size-16px font-400 color-#cdeaff italic"> nickname </div>
        </div>
      </div>
      <div class="w-124px cursor-pointer relative hover:brightness-120" @click="handleLoginOut">
        <img class="w-full block" src="@/assets/imgs/home/log-out.png" alt="" srcset="" />
        <div
          class="flex items-center justify-center absolute top-0 left-0 w-full h-full leading-none text-16px font-400 color-#daedff italic tracking-.8px"
        >
          退出系统
        </div>
      </div>
    </div>
    <!-- 顶部 操作栏 End -->

    <!-- 主体 系统按钮 Start -->
    <div class="flex-1 overflow-hidden flex items-center justify-between box-border px-5%">
      <div class="h-full flex flex-col justify-between box-border px-3% py-6%">
        <system-button
          v-for="(item, index) in leftBtn"
          :key="item.type"
          type="left"
          :item="item"
          :style="leftBtn.length > 2 && index + 1 == 2 ? 'left:-40px' : ''"
          @click="handleSystemButtonClick"
        />
      </div>
      <div class="h-full flex flex-col justify-between box-border px-3% py-6%">
        <system-button
          v-for="(item, index) in rightBtn"
          :key="item.type"
          type="right"
          :item="item"
          :style="[
            rightBtn.length > 2 && index + 1 == 2 ? 'right: -40px' : '',
            index + 1 == 4 ? 'right:60px' : ''
          ]"
          @click="handleSystemButtonClick"
        />
      </div>
    </div>
    <!-- 主体 系统按钮 End -->
  </div>
</template>

<script setup lang="ts">
import { ref, toRaw, watch } from 'vue'
import { useRouter } from 'vue-router'
import type { RouteLocationNormalizedLoaded, RouteRecordRaw } from 'vue-router'
const { currentRoute, addRoute, push } = useRouter()

import systemButton from './module/system-button.vue'
import { useUserStore } from '@/store/modules/user'
import { usePermissionStore } from '@/store/modules/permission'
import { leftBtn, rightBtn } from './module/system-button-config'
const permissionStore = usePermissionStore()
const userStore = useUserStore()
const handleLoginOut = async () => {
  userStore.logoutConfirm().then(() => {
    permissionStore.logout()
  })
}

const redirect = ref<string>('')

watch(
  () => currentRoute.value,
  (route: RouteLocationNormalizedLoaded) => {
    redirect.value = route?.query?.redirect as string
  },
  {
    immediate: true
  }
)

/**
 * 系统按钮触发
 * @param type 系统唯一标识
 */
const handleSystemButtonClick = async (type: string) => {
  const rawMenus = toRaw(permissionStore.getRawMenus)
  const filterRawMenus = rawMenus?.filter((item) => item.path == type)[0]?.children

  if (filterRawMenus) {
    const routers = filterRawMenus || []

    permissionStore.setRoleRouters(routers)

    await permissionStore.generateRoutes('server', routers).catch(() => {})

    permissionStore.getAddRouters.forEach((route) => {
      addRoute(route as RouteRecordRaw) // 动态添加可访问路由表
    })
    permissionStore.setIsAddRouters(true)

    push({ path: redirect.value || permissionStore.addRouters[0].path })
  }
}
</script>

<style lang="less" scoped>
.home-container {
  background-image: url('./../../assets/imgs/home/main-bg-2.png');
}
</style>
